<!--  -->
<template>
  <div class="containter">
    <navheader class="nav-header">
      <div slot="mide" class="mide">
        <div type="text" class="search">
          <i class="iconfont icon-sousuosearch82"></i>
          <p class="search-p">发现更多</p>
        </div>
      </div>
      <div slot="right" class="lindan">
        <i class="iconfont icon-lingdang"></i>
      </div>
    </navheader>
    <!-- 轮播图 -->
      <lunbo :imgs="imgs" @reloadData="reloadData"></lunbo>
    <middeContent :buttonTops="buttonTops" :bannerImg="bannerImg" :activitylist="activitylist"></middeContent>



  </div>
</template>
 
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import navheader from "@/components/header/header";
import lunbo from "@/components/header/lunbo";
import middeContent from "@/components/header/middeContent";
import { lunboImgsUrl } from "@/web/header";
export default {
  name: "home",
  //import引入的组件需要注入到对象中才能使用
  components: {
    navheader,
    lunbo,
    middeContent
  },
  data() {
    return {
      imgs:[],
      buttonTops:[],
      activitylist:[],
      bannerImg:{}
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    reloadData() {
      lunboImgsUrl().then(res => {
        this.imgs = res.data["homepage-ntopbanner"];
        this.buttonTops=res.data["homepageTopButton"]
        this.activitylist=res.data["homepageInexpensive"]
        this.bannerImg=res.data["homepageMainActivity"][0]
        console.log(res.data);
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.nav-header {
  position: fixed;

  display: flex;
  width: 100%;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  overflow: hidden;
  z-index: 9;
  /* background-color:aqua; */
}
.mide {
  width: 100%;
  flex: 1;
}
.search {
  display: flex;
  width: 100%;
  height: 30px;
  border-radius: 10px;
  line-height: 30px;
  background-color: #fff;
  border: solid 0.5px #e8e9ef;
  padding-left: 5px;
  align-items: center;
}
.search-p {
  font-size: 15px;
  height: 20px;
  line-height: 20px;
  color: #e5e5e5;
  display: inline-block;
  margin-left: 10px;
  padding-bottom: 4px;
}
.lindan {
  margin-left: 8px;
  display: inline-block;
  background-color: #56676e;
  height: 30px;
  width: 30px;
  line-height: 30px;
  border-radius: 50%;
  text-align: center;
}
.icon-sousuosearch82::before {
  font-size: 25px;
}
.icon-lingdang::before {
  font-size: 20px;
  color: #fff;
}
/* 轮播 */
.lun-bo {
  width: 100%;
}
</style>